<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="params.referenceNo" placeholder="输入订单编号" style="width: 200px;" class="filter-item" clearable />
      <el-select v-model="params.merchantNo" placeholder="商户名称" filterable clearable class="filter-item" @change="getShopListAll" style="width: 160px">
        <el-option v-for="item in merchantListAll" :key="item.key" :label="item.merchantName" :value="item.merchantNo" />
      </el-select>
      <el-select v-model="params.shopId" placeholder="店铺名称" filterable clearable class="filter-item" style="width: 160px">
        <el-option v-for="item in shopListAll" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="params.payType" placeholder="支付方式" clearable class="filter-item" style="width: 120px">
        <el-option label="微信支付" value="wx" />
        <el-option label="微信刷脸" value="wxface" />
        <el-option label="支付宝" value="ali" />
      </el-select>
      <el-date-picker
              v-model="modDateValue"
              class="filter-item"
              :editable="false"
              :clearable="false"
              value-format="timestamp"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 380px;">
      </el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="transList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
      </el-table-column>
      <el-table-column
              prop="referenceNo"
              label="订单编号"
              align="center">
      </el-table-column>
      <el-table-column
              prop="merchantName"
              label="店铺名称"
              align="center">
      </el-table-column>
      <el-table-column
              prop="transAmount"
              label="支付金额"
              align="center"
              width="120">
      </el-table-column>
      <el-table-column
              prop="transSource"
              label="支付方式"
              :formatter="getTransSource"
              align="center"
              width="120">
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="交易时间"
              align="center"
              width="200">
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getTransList" />
  </div>
</template>

<script>
import { transactionList,merchantShopAll,ztShopAll } from "@/api/api.verify.js"
import Pagination from '@/components/Pagination'

export default {
  components:{Pagination},
  name: 'TransactionList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      transList:[],//支付列表
      total:0,//总条数
      merchantListAll:[],//所有商户名称列表
      shopListAll:[],//所有店铺名称列表
      modDateValue: [this.common.getTimeStamp0()*1000,this.common.getTimeStamp24()*1000],//日期
      params:{
        current: 1,
        size: 10,
        merchantNo:null,//商户编号
        shopId:null,//店铺ID
        referenceNo:null,//订单编号
        payType:null,//支付类型
        beginDate:this.common.getLocalTime(this.common.getTimeStamp0()*1000),//开始时间
        endDate:this.common.getLocalTime(this.common.getTimeStamp24()*1000),//结束时间
      },//查询条件
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){
      this.getMerchantListAll()
      this.getShopListAll()
      this.getTransList()
    },
    getMerchantListAll(){//获取所有商户名称列表
      let _this=this;
      merchantShopAll({}).then(d=>{
        _this.merchantListAll=d.data
      })
    },
    getShopListAll(e){//获取所有店铺名称列表
      let _this=this
      let data={}
      if(e){
        data.shopNo=e
      }
      ztShopAll(data).then(d=>{
        _this.shopListAll=d.data
      })
    },
    getTransList(){
      let _this=this;
      let data=this.params;
      this.listLoading = true
      transactionList(data).then(d=>{
        _this.transList=d.data.mapList.records
        _this.total=Number(d.data.mapList.total)
      }).finally(d=>{
        _this.listLoading = false
      })
    },
    getSearch(){//查询
      this.params.current=1
      this.getTransList()
    },
    getTransSource(row, column, cellValue, index){//支付方式
      switch(cellValue){
        case "wx":
          return "微信支付"
        case "wxface":
          return "微信刷脸"
        case "ali":
          return "支付宝"
        default:
          return cellValue
      }
    },
  },
  watch:{
    'params.merchantNo':function(val){
      let _this=this;
      if(val==""){
        _this.params.merchantNo=null
      }
    },
    'params.shopId':function(val){
      let _this=this;
      if(val==""){
        _this.params.shopId=null
      }
    },
    modDateValue: function () {
        if (this.modDateValue == null) {
          // this.params.beginDate = this.common.getTimeStamp0(-1)
          // this.params.endDate = this.common.getTimeStamp24(-1)
          this.params.beginDate = null
          this.params.endDate = null
          return
        }
        // this.params.beginDate = parseInt(this.modDateValue[0] / 1000)
        // this.params.endDate = parseInt(this.modDateValue[1] / 1000)
        this.params.beginDate = this.common.getLocalTime(this.modDateValue[0])
        this.params.endDate = this.common.getLocalTime(this.modDateValue[1])
    },
  }
}
</script>
